<template>
	<view class="page" @touchmove.stop.prevent="moveHandle">
		<view class="disalog-box">
			<view class="disalog-title">
				供应商计划
			</view>
			<view class="close-icon" @click="closeClick">
				<image class="icon" src="/static/image/close_icon.png" mode="aspectFit"></image>
			</view>
			<scroll-view class="scroll-content" scroll-y>
			<view class="block-box">
			<view class="item-box">
				<view class="left-box">
					<view class="item-title">
						已发货数量：
					</view>
					<view class="item-value">
						{{info.auantityShipped}}
					</view>
				</view>
				<view class="right-box">
					<view class="item-title">
						成品库存数：
					</view>
					<view class="item-value">
						{{info.finishedGoodsInventory}}
					</view>
				</view>
			</view>
			<view class="item-box">
				<view class="left-box">
					<view class="item-title">
						半成品库存数：
					</view>
					<view class="item-value">
						{{info.inventoryOfHalfProducts}}
					</view>
				</view>
				<view class="right-box">
					<view class="item-title">
						原材料库存数：
					</view>
					<view class="item-value">
						{{info.rawMaterialInventory}}
					</view>
				</view>
			</view>
		</view>
		<view class="block-box">
			<view class="item-title" v-if="info.shippingSchedule.array.length > 0">
				发货计划：
			</view>
			<view class="item-box flexitem" v-for="(item,index) in info.shippingSchedule.array" :key="index">
				<view class="left-box">
					<view class="item-value">
						{{item.time}}
					</view>
				</view>
				<view class="right-box">
					<view class="item-value">
						{{item.value}}
					</view>
				</view>
			</view>
			<view class="item-box flexitem total" v-if="info.shippingSchedule.array.length > 0">
				<view class="left-box">
					数量合计：
				</view>
				<view class="right-box">
						{{info.shippingSchedule.total}}
				</view>
			</view>
			<view class="item-title" v-if="info.productionPlan.array.length > 0">
				生产计划：
			</view>
			<view class="item-box flexitem" v-for="(item,index) in info.productionPlan.array" :key="index">
				<view class="left-box">
					<view class="item-value">
						{{item.time}}
					</view>
				</view>
				<view class="right-box">
					<view class="item-value">
						{{item.value}}
					</view>
				</view>
			</view>
			<view class="item-box flexitem total" v-if="info.productionPlan.array.length > 0">
				<view class="left-box">
					数量合计：
				</view>
				<view class="right-box">
						{{info.productionPlan.total}}
				</view>
			</view>
			<view class="item-title" v-if="info.keyProcessProductionPlan.array.length > 0">
				关键工序生产计划：
			</view>
			<view class="item-box flexitem" v-for="(item,index) in info.keyProcessProductionPlan.array" :key="index">
				<view class="left-box">
					<view class="item-value">
						{{item.time}}
					</view>
				</view>
				<view class="right-box">
					<view class="item-value">
						{{item.value}}
					</view>
				</view>
			</view>
			<view class="item-box flexitem total" v-if="info.keyProcessProductionPlan.array.length > 0">
				<view class="left-box">
					数量合计：
				</view>
				<view class="right-box">
						{{info.keyProcessProductionPlan.total}}
				</view>
			</view>
		</view>
		<view class="clearbottom">
			
		</view>
		</scroll-view>
		</view>
	</view>
</template>

<script>
	import * as api from '@/utils/api.js';
	export default {
		props:{
			materialId:{
				type:String,
				default:''
			},
			purchaseId:{
				type:String,
				default:''
			}
		},
		data() {
			return {
				info:{}
			}
		},
		mounted() {
			let data = {materialId:this.materialId,purchaseId:this.purchaseId};
			this.lookByPurchaseIdAndMaterialId(data);
		},
		methods: {
			lookByPurchaseIdAndMaterialId:function(data){
				api.lookByPurchaseIdAndMaterialId(data).then(res=>{
					if(res.data.result == null){
						uni.showToast({
							title: '暂无供货商计划',
							icon:'none',
							duration: 2000
						});
						this.closeClick();
						return;
					}
					res.data.result.keyProcessProductionPlan = this.parseArray(res.data.result.keyProcessProductionPlan);
					res.data.result.productionPlan = this.parseArray(res.data.result.productionPlan);
					 res.data.result.shippingSchedule = this.parseArray(res.data.result.shippingSchedule);
					console.log(res.data.result);
					this.info = res.data.result;
				})
			},
			/**
			 * 转化接口数据为数组
			 */
			parseArray:function(data){
				let array = [];
				let num = 0;
				if(data.length > 0){
					let arr = data.split(";");
					arr.forEach(result=>{
						let item = result.split(",");
						num += parseFloat(item[1]);
						array.push({time:item[0],value:parseFloat(item[1])});
					})
					num = parseFloat(num);
				}
				return {total:num,array:array};
			},
			moveHandle(){
				return;
			},
			closeClick:function(){
				this.$emit('close');
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background: rgba(0,0,0,0.5);
	}
	.disalog-box{
		background-color: white;
		border-radius:30rpx;
		position: absolute;
		bottom:0%;
		left: 50%;
		animation-name: disalogshow;
		animation-duration: 0.5s;
		width:100%;
		max-height:80vh;
		transform: translate(-50%,0%);
		box-sizing: border-box;
		padding:20rpx 30rpx;
		font-size: 28rpx;
		.disalog-title{
			font-weight: bold;
			height: 70rpx;
			box-sizing: border-box;
			padding: 0 10rpx;
			line-height: 70rpx;
			text-align: center;
		}
		.close-icon{
			position: absolute;
			right: 20rpx;
			top: 20rpx;
			width:70rpx;
			height: 70rpx;
			.icon{
				margin:20%;
				width: 60%;
				height: 60%;
				display: block;
			}
		}
		.scroll-content{
			width: 100%;
			height:calc(80vh - 70rpx);
		}
		.block-box{
			padding-bottom: 30rpx;
			border-bottom: 1px solid #e6e6e6;
		.item-title{
			line-height: 60rpx;
		}
		.item-box{ 
			display: flex;
			justify-content: space-between;
			margin-bottom:20rpx;
			.left-box,.right-box{
				width:calc(50% - 10rpx);
			}
			
			.item-value{
				box-sizing: border-box;
				padding: 0 10rpx;
				line-height: 70rpx;
				background-color: #f6f7f8;
			}
			
		}
		.flexitem{
			.left-box{
				width: calc(60% - 10rpx);
			}
			.right-box{
				width: calc(40% - 10rpx);
			}
		}
		.total{
			
			.left-box{
				line-height: 70rpx;
				text-align: right;
			}
			.right-box{
				background-color: transparent;
				color: #ed5a13;
				box-sizing: border-box;
				line-height: 70rpx; 
				padding-left: 10rpx;
			}
		}
		}
	}
	.clearbottom{
		width: 100%;
		height: calc(20rpx + constant(safe-area-inset-bottom));
		height: calc(20rpx + env(safe-area-inset-bottom));
	}
	@keyframes disalogshow {
		0% {
			transform:translate(-50%,50%);
			opacity: 0;
		}
	
		100% {
			transform: translate(-50%,0%);
			opacity: 1;
		}
	}
</style>
